import {
  reactive,
  onMounted,
  defineComponent,
  toRefs,
  getCurrentInstance,
  provide,
  inject
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import deliveryApi from "@/api/out/delivery-api";
import downloadApi from "@/api/download-api";
import warehouseApi from "@/api/inwarehouse/warehouse-api";
import goodsApi from "@/api/inwarehouse/goods-api";
import ZlrtTable from "@/components/zlrt-table/table.vue";
import ZlrtSearch from "@/components/zlrt-search/search.vue";
import TableContext from "@/components/zlrt-table/table-context";
export default defineComponent({
  components: {
    ZlrtTable,
    ZlrtSearch,
  },
  setup() {
    const statusOptions = [
      { value: "0", label: "新增" },
      { value: "99", label: "已完成" },
      // { value: '100', label: '已同步' }
    ];

    const ctx = reactive(
      new TableContext(getCurrentInstance(), {
        title: "发货单",
        api: deliveryApi,
        columns: [
          // { prop: 'warehouseName', label: '仓库', valueType: 'slot' },
          { prop: "projectName", label: "项目", valueType: "input" },
          {
            prop: "projectOriginalNo",
            label: "合同号",
            valueType: "input",
            width: 150,
          },
          {
            prop: "plateNumber",
            label: "车牌号",
            valueType: "input",
            width: 150,
          },
          { prop: "driverName", label: "车主", width: 100 },
          { prop: "driverTel", label: "联系方式", width: 150 },
          {
            prop: "status",
            label: "状态",
            valueType: "select",
            options: statusOptions,
            slot: true,
            width: 100,
          },
          { prop: "createOn", label: "日期", slot: true, width: 150 },
          { prop: "operation", label: "操作", slot: true, width: 150 },
        ],
        rules: {
          warehouseId: [
            { required: true, message: "请选择仓库", trigger: "change" },
          ],
          originalNo: [
            { required: true, message: "请输入单号", trigger: "blur" },
          ],
          project: [
            { required: true, message: "请输入项目名称", trigger: "blur" },
          ],
          status: [{ required: true, message: "请输入状态", trigger: "blur" }],
          date: [{ required: true, message: "请选择日期", trigger: "change" }],
        },
        other: {
          formatDt(val) {
            if (!val) {
              return "-";
            }
            return val.substring(0, 10);
          },
          async pass() {
            ctx.editData.status = "99";
            const res = await deliveryApi.save(ctx.editData);
            if (res.success) {
              ElMessage.success("审核成功");
              ctx.loadData();
              ctx.editVisible = false;
            }
          },
          getStatusName(val: string) {
            const obj = statusOptions.find((item) => {
              return item.value === val;
            });
            if (obj) {
              return obj["label"];
            }
            return "-";
          },
          handleWarehouse(val: string) {
            const obj = data.warehouseOptions.find((item) => {
              return item.id === val;
            });
            ctx.editData.warehouseName = obj["name"];
          },
          addGoods() {
            if (!ctx.editData["orderGoodsList"]) {
              ctx.editData["orderGoodsList"] = [];
            }
            ctx.editData["orderGoodsList"].push({});
          },
          delGoods() {
            data.delGoodsList.map((dgl) => {
              const index = ctx.editData["orderGoodsList"].findIndex((item) => {
                return item.id === dgl.id;
              });
              ctx.editData["orderGoodsList"].splice(index, 1);
            });
          },
          handleGoodsSelectionChange(val: any) {
            if (!ctx.editData["orderGoodsList"]) {
              return;
            }
            data.delGoodsList = val;
          },
          handleGoodsChange(val: string) {
            const obj = data.goodsOptions.find((item) => {
              return item.skuName === val;
            });
            const index = ctx.editData["orderGoodsList"].findIndex((item) => {
              return item.skuName === val;
            });
            ctx.editData["orderGoodsList"].splice(index, 1, obj);
          },
          makeExport() {
            deliveryApi.downloadDeliveryDetail(data.listItem).then((res) => {
              if (res.success) {
                downloadApi.name(res.msg)
              }
            });
          },
          makeList(val){
            data.listItem = val
          }
        },
      })
    );

    const getWarehouseList = async () => {
      const params = { filter: { disabled: false } };
      const res = await warehouseApi.list(params);
      data.warehouseOptions = res.data.records;
    };

    const getGoodsList = async (val: string) => {
      data.getGoodsLoading = true;
      const params = { otherFilter: { skuName: val } };
      const res = await goodsApi.list(params);
      data.goodsOptions = res.data.records;
      data.getGoodsLoading = false;
    };

    const makeExport = async (val) => {
      console.log("val", val);
    };

    const data = reactive({
      ctx,
      warehouseOptions: [],
      goodsOptions: [],
      getGoodsLoading: false,
      listItem:'',
      delGoodsList: [],
      getGoodsList,
    });

    // init
    onMounted(() => {
      getWarehouseList();
      ctx.loadData();
    });

    return {
      ...toRefs(data),
    };
  },
});
